<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="/the-good-thing-of-wang-feizhai/vue_basic/js/vue.js"></script>
    <div id="root">
        <p>{{num}}</p>

        <cpn></cpn>
        <cpn2></cpn2>
        <!-- <cpn3></cpn3> -->
    </div>

    <!-- 模板分离方法 -->

        <!-- 方式1：使用script标签，将组件的模板内容在单独的js中编码,注意类型必须是text/x-template-->
    <script type="text/x-template" id="cpnT"> 
          <div>
            <h2>组件标题1</h2>
            <p>内容1</p>
          </div>
    </script>


        <!--方式2：template标签抽离，-->
    <template id="cpnT2">
        <div>
            <h2>组件标题2</h2>
            <p>{{msg}}</p>
            <p>内容2</p>
        </div>
    </template>

    <template id="cpnT3">
        <div>
            <h2>组件标题3</h2>
            <cpn2></cpn2>
            <p>内容3</p>
        </div>
    </template>


    <script>
        const cpn2 = {
            template: "#cpnT2",
            data(){
                return{
                    msg:'Hello,cpn2'
                }
            }
        }

        const cpn3 = {
            template: "#cpnT3",
            data(){
                return{
                    msg:'Hello,cpn2'
                }
            },
            components:{
                cpn2:cpn2
            }
        }


        Vue.component('cpn',{
            template:'#cpnT'
          })

        new Vue({
            el:'#root',
            data(){
                return{
                    num:1,
                }
            },
            methods: {
            },
            components:{
                cpn2:cpn2
            }
        })
    </script>
</body>
</html>